<template>
  <!-- 柱状图 -->
  <div
    ref="myChartsRef"
    :style="{ height: height, width: width }"
    class="echarts"
  ></div>
</template>
<script setup>
import { nextTick } from "vue"
const emit = defineEmits(["click_Fun"])
const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties

const props = defineProps({
  width: {
    default: "100%",
    type: String
  },
  height: {
    default: "100%",
    type: String
  },
  pyramidList: {
    type: Object
  }
})

const myChartsRef = ref()

// 渲染echarts
const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(myChartsRef.value)
  if (myChart) {
    myChart.dispose()
  }
  myChart = $echarts.init(myChartsRef.value)

  let data = props.pyramidList
  
  let option = {
    color: ["#4FC5EA", "#F9CD33", "#F58021"],
    legend: {
      type: "plain",
      orient: "vertical",
      right: "1%",
      top: "10%",
      align: "left",
      itemGap: 5,
      icon: "rect",
      itemWidth: fontSize(30), // 设置宽度
      itemHeight: fontSize(30), // 设置高度
      symbolKeepAspect: false,
      selectedMode: false,
      textStyle: {
        color: "#fff",
        fontSize: fontSize(30),
        rich: {
          a: {
            color: "#fff",
            padding: [0, 0, 0, 10],
            fontSize: fontSize(35)
          },
          b: {
            color: "#fff",
            fontSize: fontSize(30)
          }
        }
      },
      formatter: (name) => {
        const { value } = data.find((i) => i.name === name)
        return `{a|${name}} {b|${value}}`
      }
    },
    series: [
      {
        zlevel: 1,
        name: "资产分布图",
        type: "funnel",
        left: "5%",
        top: fontSize(30),
        bottom: fontSize(30),
        width: "60%",
        // min: 0,
        // max: 100,
        minSize: "0%",
        maxSize: "100%",
        sort: "ascending",
        gap: 2,
        label: {
          show: false
        },
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 1
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: "solid"
          }
        },
        emphasis: {
          label: {
            fontSize: fontSize(30),
            formatter: function (params) {
              return params.data.name + ":" + params.data.value
            }
          }
        },
        data
      }
    ]
  }

  setTimeout(() => {
    myChart.resize()
  }, 1000)
  myChart.setOption(option)
}

onMounted(() => {
  nextTick(() => {
    initEcharts()
  })
  addEventListener("resize", () => {
    initEcharts()
  })
})

// watch(
//   () => props.option,
//   (val) => {
//     //// console.log(val);
//     nextTick(() => {
//       if (myChart.value) {
//         initEcharts()
//       }
//     })
//   },
//   {
//     deep: true
//   }
// )
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
